import React, { useEffect } from 'react'
import styles from "../assets/styles/myTabs.module.less"
import { Link } from "react-router-dom"
import { useSelector,useDispatch } from "react-redux"
import {menuChangeStatusAC} from "../redux/actions/menuAction"

export default function MyTabs() {
    const tabs = useSelector(state => {
        return state.menuRD
    })
    const dispatch = useDispatch()
    const changeTasStatus = (path)=>{
        dispatch(menuChangeStatusAC(path))
    }
    return (
        <div className={styles.wrapper}>
            <ul className={styles.box}>
                {tabs.menus.map(item => {
                    return (
                        <Link key={item.title} to={item.path}>
                            <li onClick={()=>changeTasStatus(item.path)} className={item.status?styles.active:""}>{item.title}</li>
                        </Link>
                    )
                })}
            </ul>
        </div>
    )
}
